import React from 'react'
import { Table, Button, Modal, message, Select, Input, Form, InputNumber, Radio } from 'antd';
import { inject, observer } from 'mobx-react'
const { Option } = Select;

@inject('wz')
@observer
class Pubtable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedRowKeys: [],
        }
    }
    onSelectChange = async (selectedRowKeys) => {
        await this.setState({ selectedRowKeys });
        this.props.wz.SHarr = [...this.state.selectedRowKeys]
        console.log(this.props.wz.SHarr);
    };


    static getDerivedStateFromProps(nextprops) {
        const { coldata, data } = nextprops
        return {
            columns: coldata,
            data: data,
        }
    }
    clearSelect = async () => {
        // console.log('触发子组件事件');
        await this.setState({
            selectedRowKeys: [],
        })
    }
    componentDidMount() {
        this.props.childEvevnt(this);
    }
    render() {
        const { selectedRowKeys } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <Table rowSelection={rowSelection} columns={this.state.columns} dataSource={this.state.data}
                pagination={{
                    pageSize: 5, position: ['bottomCenter']
                }}
            />
        )
    }
}


const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

@inject('wz')
@observer
class Btn extends React.Component {
    constructor() {
        super()
        this.state = {
            radio: '通过审核',
            SHvisible: false, //审核弹出
            visible: false, //编辑弹出
            objkey: '',
            //下面是编辑框值
            selectValue: '',
            ac_name: '',
            ac_content: '',
            ac_start: '',
            ac_end: '',
            ac_num: '',
            ac_state: ''
        }
    }

    //审核
    shenhe = () => {
        this.setState({
            SHvisible: true
        })
    }
    shenheCancel = () => {
        this.setState({
            SHvisible: false
        })
    }
    shenheSure = async () => {
        this.setState({
            SHvisible: false
        })
        await this.props.wz.shenhe(this.state.radio)
        message.success('操作成功')
    }
    //编辑
    edit = (obj) => {
        this.setState({
            visible: true,
            objkey: obj.key,
            ac_name: obj.name,
            ac_content: obj.activeContent,
            ac_start: obj.startTime,
            ac_end: obj.endTime,
            selectValue: obj.building,
            ac_state: obj.activeState,
            ac_num: obj.num,
        })
        console.log(obj.startTime);
    }
    contentChange = (e) => {
        this.setState({
            ac_content: e.target.value
        })
    }
    modalCancel = () => {
        this.setState({
            visible: false
        })
    }
    editOk = async () => {
        let obj = {
            key: this.state.objkey,
            name: this.state.ac_name,
            building: this.state.selectValue,
            activeContent: this.state.ac_content,
            startTime: this.state.ac_start,
            endTime: this.state.ac_end,
            activeState: '等待审核',
            // activeState: this.state.ac_state,
            num: this.state.ac_num,
        }
        await this.props.wz.editAxios(obj)
        await this.setState({
            visible: false
        })
        message.success('操作成功');
    }

    selectChange = (e) => {
        this.setState({
            selectValue: e
        })
        console.log(e);
    }
    //审核单选
    raioChange = (e) => {
        // console.log(e.target.value);
        this.setState({
            radio: e.target.value
        })
    }
    //
    dateStart = (e) => {
        this.setState({
            ac_start: e.target.value
        })
    }
    dateEnd = (e) => {
        this.setState({
            ac_end: e.target.value
        })
    }
    inputnumberChange = (e) => {
        this.setState({
            ac_num: e
        })
    }
    render() {
        return (
            <div>
                <Button disabled={this.props.rowdata.activeState !== '已结束' ? false : true} onClick={this.edit.bind(this, this.props.rowdata)}>编辑</Button>
                <Button disabled={this.props.rowdata.activeState !== '等待审核' ? true : false} onClick={this.shenhe.bind(this, this.props.rowdata)}>审核</Button>
                <Modal  //编辑
                    title="编辑"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key="back" onClick={this.modalCancel}>
                            取消
                        </Button>,
                        <Button key="ok" type="primary" onClick={this.editOk}>
                            确认修改
                    </Button>
                    ]}
                >
                    <Form {...layout}>
                        <Form.Item label="活动标题" >
                            <Input disabled={true} value={this.state.ac_name} />
                        </Form.Item>
                        <Form.Item label="活动内容">
                            <Input value={this.state.ac_content} onChange={this.contentChange} />
                        </Form.Item>
                        <Form.Item label="起始时间">
                            <Input disabled={this.state.ac_start === undefined ? true : false} onChange={this.dateStart} value={this.state.ac_start} />
                        </Form.Item>
                        <Form.Item label="结束时间">
                            <Input disabled={this.state.ac_end === undefined ? true : false} onChange={this.dateEnd} value={this.state.ac_end} />
                        </Form.Item>
                        <Form.Item label="起始报名数" >
                            <InputNumber value={this.state.ac_num} onChange={this.inputnumberChange} />
                        </Form.Item>
                        <Form.Item label="选择楼盘">
                            <Select value={this.state.selectValue} style={{ width: 120 }} onChange={this.selectChange}>
                                <Option value="楼盘A">楼盘A</Option>
                                <Option value="楼盘B">楼盘B</Option>
                                <Option value="楼盘C">楼盘C</Option>
                                <Option value="楼盘D">楼盘D</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal  //审核
                    style={{ textAlign: 'center' }}
                    title="审核"
                    visible={this.state.SHvisible}
                    // onOk={this.handleOk}
                    onCancel={this.shenheCancel}
                    footer={[
                        <Button key="back" onClick={this.shenheCancel}>
                            取消
                        </Button>,
                        <Button key="sure" onClick={this.shenheSure}>
                            确认
                        </Button>
                    ]}
                >
                    <Radio.Group onChange={this.raioChange} defaultValue='通过审核' buttonStyle="solid">
                        <Radio.Button value="通过审核">通过</Radio.Button>
                        <Radio.Button value="未通过审核">不通过</Radio.Button>
                    </Radio.Group>
                </Modal>
            </div>
        )
    }
}
export default {
    Pubtable,
    Btn,
}